<template>
  <div id="list">
    <van-row v-for="user in users" :key="user.id">
      <van-col span="6">
        <van-image
          width="100"
          height="100"
          :src="uploads + user.icon"
        />
      </van-col>
      <van-col span="10" offset="3">
          <p>{{user.name}}</p>
          <p>{{user.id}}- {{user.age}} - {{user.type}}</p>  
          <van-button type="warning">查看详情</van-button>
      </van-col>

      <!--分割线  -->
    <div class="gap"></div>
    </van-row>

    
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
    props:['users'],
    computed: {
    // ...mapState(['badge'])
    ...mapState({
      uploads: (state) => state.uploads,
    }),
  },
}
</script>

<style scoped>
   >>> .van-image__img{
       padding: 10px;
   }
   #list{
       margin-bottom: 50px
   } 
   #list p:nth-child(2){
       color: #9e9e9e;
   }

   >>> .van-col{
       line-height: 10px;
   }
   .gap {
  margin-top: 1px;     
  height: 2px;
  background: lightgray;
 }
 >>> .van-button--normal{
     border-radius: 15px;
 }


</style>